<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- 禁止缩放 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
  <title>AR探索</title>
  <head>
    <!-- 描述 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>

  <script src="./js/aframe-master.min.js"></script>
  <script src="./js/aframe-ar-nft.js"></script>
  <script src="./js/gestures.js"></script>
  <script src="https://cdn.bootcss.com/eruda/1.5.8/eruda.min.js"></script>
  <script>
    eruda.init();
    console.log('控制台打印信息');
  </script>

  <style>
    /*加载过程中蒙罩的css*/
    .arjs-loader {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .arjs-loader div {
      text-align: center;
      font-size: 1.25em;
      color: white;
    }


    #tansuo {
      display: none;
      /* display: block; */
      z-index: 99;
      position: fixed;
      bottom: 5rem;
      right: 1rem;
      width: 4rem;
      height: 3rem;
      background-color: #999;
      line-height: 3rem;
      text-align: center;
      border-radius: 10px;
      font-size: 1rem;
      color: #17ffe1;
    }

    #gushi {
      display: block;
      z-index: 99;
      position: fixed;
      bottom: 5rem;
      left: 1rem;
      width: 4rem;
      height: 3rem;
      background-color: #999;
      line-height: 3rem;
      text-align: center;
      border-radius: 10px;
      font-size: 1rem;
      color: #17ffe1;
    }
  </style>
</head>

<script>
  window.addEventListener("arjs-nft-loaded", (event) => {
    // Hide loading overlay
    // 当所有 NFT 标记都完成加载时，该事件将被触发。这时你就可以开始用相机跟踪你的NFT标记了。
    console.log("当所有 NFT 标记都完成加载时，该事件将被触发。这时你就可以开始用相机跟踪你的NFT标记了。");
  });

  window.onload = () => {
    document.querySelector("#tansuo").addEventListener("click", () => {
      console.log("点击了探索按钮");
      window.open('./model.html')
    })
    document.querySelector("#gushi").addEventListener("click", () => {
      window.open('./detection.html')
    })
  }

  // 识别状态
  AFRAME.registerComponent("shibie", {
    init: function () {
      this.el.addEventListener("markerFound", () => {
        console.log("识别到目标物体");
        document.querySelector("#tansuo").style.display = "block";
      });
      this.el.addEventListener("markerLost", () => {
        console.log("识别不到了");
        document.querySelector("#tansuo").style.display = "none";
      })
    },
  });
</script>

<body style="margin : 0px; overflow: hidden;">
  <div class="arjs-loader">
    <div>加载中...</div>
  </div>
  <div id="tansuo">
    3D探索
  </div>
  <div id="gushi">
    AR故事
  </div>
  <a-scene vr-mode-ui="enabled: false;" renderer="logarithmicDepthBuffer: true;" embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;" gesture-detector>
    <!-- a-nft是定义图像跟踪实体的锚点 -->
    <a-nft type="nft" url="arTrack/feature/mubiao/mubiao" smooth="true" smoothCount="10" smoothTolerance=".01"
      smoothThreshold="5" shibie>
      <!-- 展示模型的路径 -->
      <a-entity gltf-model="model/mubiao/scene.gltf" scale="5000 5000 5000"
        gesture-handler="minScale: 0.25; maxScale: 10" position="50 0 -200" rotation="0 0 0">
      </a-entity>
    </a-nft>
    <!-- 动态摄像机 -->
    <a-entity camera="fov: 190"></a-entity>
  </a-scene>
</body>

</html>